<template>
  <view :style="colorStyle">
    <block v-if="!loadingPage">
      <x-skeleton
        type="list"
        :loading="true"
        v-for="(item, index, key) in 10"
        :key="key"
      >
        <view>列表</view>
      </x-skeleton>
    </block>
    <view class="tabsModule flex between">
      <view
        class="tablist"
        v-for="(item, index, key) in tablist"
        :key="key"
        @click="tablistChange(index)"
      >
        <view
          class="name c858585 f32"
          :style="{
            color: `${tablistindex == index ? 'var(--view-theme)' : ''}`,
          }"
        >
          {{ item.name }}
        </view>
        <view class="border" v-if="tablistindex == index"> </view>
      </view>
    </view>
    <view class="" style="height: 88rpx"> </view>
    <view class="infobox1" v-if="loadingPage">
      <view
        class="list"
        v-for="(item, index, key) in list"
        :key="key"
        @click="gourl(`/pages/order/detail?id=${item.id}`)"
      >
        <view class="block1 flex aitems between">
          <view
            class="left flex aitems"
            @click.stop="gourl(`/pages/seller/info?id=${item.seller.id}`)"
          >
            <image
              class="icon1"
              :src="item.seller.logo"
              mode="aspectFill"
            ></image>
            <view class="name c1F1F1F f32 fontWeight">
              {{ item.seller.name }}
            </view>
            <image class="icon2" src="@/static/img15.png" mode=""></image>
          </view>
          <view class="right themeColor f24" v-if="item.orderStatus == 0">
            待支付
          </view>
          <view
            class="right themeColor f24"
            v-if="
              item.orderStatus == 1 &&
              (item.logisticsType == 1 || item.logisticsType == 3) &&
              item.orderLogisticsList.length == 0 &&
              item.refundStatus == 0
            "
          >
            待发货
          </view>
          <view
            class="right themeColor f24"
            v-if="
              item.orderStatus == 1 &&
              item.logisticsType == 1 &&
              item.orderLogisticsList.length !== 0 &&
              item.refundStatus == 0
            "
          >
            部分发货
          </view>
          <view
            class="right themeColor f24"
            v-if="
              item.orderStatus == 1 &&
              item.logisticsType == 2 &&
              item.refundStatus == 0
            "
          >
            备货中
          </view>
          <view
            class="right themeColor f24"
            v-if="
              item.orderStatus == 2 &&
              item.logisticsType == 2 &&
              item.refundStatus == 0
            "
          >
            待提货
          </view>
          <view
            class="right themeColor f24"
            v-if="
              item.orderStatus == 2 &&
              (item.logisticsType == 1 || item.logisticsType == 3) &&
              item.refundStatus == 0
            "
          >
            待收货
          </view>
          <!-- 	<view class="right cF65B49 f24">
						待评价
					</view> -->
          <view
            class="right c858585 f24"
            v-if="item.orderStatus == 3 && item.refundStatus == 0"
          >
            已完成
          </view>
          <view
            class="right c858585 f24"
            v-if="item.orderStatus == -1 && item.refundStatus == 0"
          >
            已取消
          </view>
          <view class="right c858585 f24" v-if="item.refundStatus == 1">
            退款中
          </view>
          <view class="right c858585 f24" v-if="item.refundStatus == 2">
            已退款
          </view>
        </view>
        <view class="block2">
          <view
            class="info1"
            v-for="(items, indexs, keys) in item.orderDetailList"
            :key="keys"
          >
            <image :src="items.goods.img" mode="aspectFill"></image>
          </view>
        </view>
        <view class="block3 c1F1F1F f28">
          共{{ item.goodsNum }}件 实付款：<text class="f28 fontWeight cF65B49"
            >￥{{ item.orderPrice }}</text
          >
        </view>
        <view class="block4 flex aitems between">
          <view class="info1 c525252 f24"> </view>
          <view class="info2 flex aitems">
            <view
              class="tip2 f28 c8B949D"
              v-if="item.orderStatus == 0"
              @click.stop="orderCancel(item)"
            >
              取消订单
            </view>
            <view
              class="tip1 f28 cfff"
              v-if="item.orderStatus == 0"
              @click.stop="handlePayOrder(item)"
            >
              立即支付
            </view>
            <view
              class="tip1 f28 cfff"
              v-if="item.orderStatus == 2 && item.logisticsType == 2"
            >
              提货凭证
            </view>
            <view
              class="tip1 f28 cfff"
              v-if="item.orderStatus == 2 && item.logisticsType == 1"
              @click.stop="gourl(`/pages/order/logistics?id=${item.id}`)"
            >
              查看物流
            </view>
            <view
              class="tip1 f28 cfff"
              v-if="item.orderStatus == 2 && item.logisticsType == 1"
              @click.stop="orderReceipt(item)"
            >
              确认收货
            </view>
            <view
              class="tip1 f28 cfff"
              v-if="
                item.commentStatus == 0 &&
                item.orderStatus == 3 &&
                item.refundStatus == 0
              "
              @click.stop="gourl(`/pages/order/evaluation?id=${item.id}`)"
            >
              马上评价
            </view>
            <view
              class="tip1 f28 cfff"
              v-if="
                item.orderLogisticsList.length == 0 &&
                item.orderStatus == 1 &&
                item.logisticsType == 1
              "
              @click.stop="gourl(`/pages/user/address?id=${item.id}&update=1`)"
            >
              修改地址
            </view>
          </view>
        </view>
      </view>
    </view>

    <nodata v-if="list.length == 0" />
    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import {
  orderPage,
  orderCancel,
  orderReceipt,
  payOrder,
} from "@/servers/servers.js";
import { HTTP_STATUS, config } from "@/servers/config.js";
import colors from "@/mixins/color";
import { loading, go, showModal, msg, requestPayment } from "@/utils/wxAPI";
import { getStorage, getToken, removeStorage } from "../../utils/storage";
import { pays } from "@/utils/pay";
import { payClient } from "@/keys/keys.js";
import { getEnv } from "@/utils/env.js";
export default {
  mixins: [colors],
  data() {
    return {
      payClient,
      tablist: [
        {
          name: "全部",
          id: "",
          logisticsType: "",
          commentStatus: "",
        },
        {
          name: "待付款",
          id: 0,
          logisticsType: "",
          commentStatus: "",
        },
        {
          name: "待发货",
          id: 1,
          logisticsType: 1,
          commentStatus: "",
        },
        {
          name: "待收货",
          id: 2,
          logisticsType: 1,
          commentStatus: "",
        },
        // {
        //   name: "待备货",
        //   id: 1,
        //   logisticsType: 2,
        //   commentStatus: "",
        // },
        // {
        //   name: "待自提",
        //   id: 2,
        //   logisticsType: 2,
        //   commentStatus: "",
        // },
        {
          name: "待评价",
          id: 3,
          logisticsType: "",
          commentStatus: 0,
        },
      ],
      tablistindex: 0,
      loadingPage: false,
      total: 0,
      list: [],
      current: 1,
      totalInfo: {},
    };
  },
  async onLoad(options) {
    if (options.t) {
      this.tablistindex = options.t;
    }
    if (getToken()) {
      this.orderPage();
    }
  },
  async onShow() {
    if (getToken()) {
      if (getStorage("orderRef")) {
        removeStorage("orderRef");
        this.current = 1;
        this.orderPage();
      }
    }
  },
  methods: {
    tablistChange(index) {
      this.tablistindex = index;
      this.current = 1;
      this.orderPage();
    },
    async orderPage() {
      loading();
      let { data } = await orderPage({
        current: this.current,
        size: 10,
        orderStatus: this.tablist[this.tablistindex].id,
        // logisticsType: this.tablist[this.tablistindex].logisticsType,
        commentStatus: this.tablist[this.tablistindex].commentStatus,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    async orderCancel(item) {
      showModal({
        t2: "是否取消该订单？",
      })
        .then(async () => {
          loading();
          let { data } = await orderCancel({
            id: item.id,
          });
          if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
            msg(data.msg);
            this.current = 1;
            this.orderPage();
          }
          uni.hideLoading();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async orderReceipt(item) {
      showModal({
        t2: "是否确认收货？",
      })
        .then(async () => {
          loading();
          let { data } = await orderReceipt({
            id: item.id,
          });
          if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
            msg(data.msg);
            this.current = 1;
            this.orderPage();
          }
          uni.hideLoading();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    gourl(url) {
      go(url);
    },

    async handlePayOrder(item) {
      loading();
      let payClient = "";
      let payType = "WX";
      let appId = "";
      let codes = "";
      // #ifdef H5
      appId = config.appId;
      if (getEnv() == "H5") {
        payClient = this.payClient.H5;
      }
      if (getEnv() == "WX_PUBLIC") {
        payClient = this.payClient.WECHAT;
      }
      // #endif
      // #ifdef MP-WEIXIN
      appId = config.MPappId;
      payClient = this.payClient.MINIAPP;
      let { code } = await uni.login();
      codes = code;
      // #endif
      let { data } = await payOrder({
        appId,
        code: codes,
        orderNo: item.orderNo,
        param: "",
        payClient,
        payType,
        returnUrl: "",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        if (info == "true") {
          this.current = 1;
          this.orderPage();
        } else {
          if (payClient == this.payClient.WECHAT) {
            pays(
              JSON.parse(info),
              (res) => {
                msg("支付成功", true);
                this.current = 1;
                this.orderPage();
              },
              () => {}
            );
          }
          if (payClient == this.payClient.MINIAPP) {
            requestPayment(JSON.parse(info))
              .then((res) => {
                msg("支付成功", true);
                this.current = 1;
                this.orderPage();
              })
              .catch((err) => {
                uni.hideLoading();
              });
          }
        }
      }
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.orderPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.orderPage();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  margin: 30rpx 30rpx 0;

  .list {
    background: #fff;
    border-radius: 30rpx;
    margin: 0 0 30rpx 0;
    padding: 30rpx 24rpx;

    .block1 {
      .left {
        .icon1 {
          width: 40rpx;
          height: 40rpx;
        }

        .name {
          margin: 0 12rpx 0 6rpx;
        }

        .icon2 {
          width: 32rpx;
          height: 32rpx;
        }
      }

      .right {
      }
    }

    .block2 {
      margin: 30rpx 0 0;
      white-space: nowrap;
      overflow-x: scroll;

      .info1 {
        margin: 0 30rpx 0 0;
        display: inline-block;

        image {
          width: 180rpx;
          height: 180rpx;
          border-radius: 28rpx;
        }
      }
    }

    .block3 {
      margin: 32rpx 0 0;

      text {
      }
    }

    .block4 {
      margin: 32rpx 0 0;

      .info1 {
      }

      .info2 {
        .tip1 {
          border-radius: 40rpx;
          background: var(--view-theme);
          padding: 21rpx 34rpx;
          text-align: center;
          margin: 0 0 0 12rpx;
        }

        .tip2 {
          border-radius: 40rpx;
          // background: var(--view-theme);
          padding: 21rpx 34rpx;
          text-align: center;
          margin: 0 0 0 12rpx;
          border: 1px solid #8b949d;
        }
      }
    }

    .block5 {
      border-radius: 24rpx;
      background: #ffedeb;
      // height: 88rpx;
      padding: 30rpx;
      margin: 32rpx 0 0;
    }
  }
}

.tabsModule {
  position: fixed;
  width: calc(100% - 60rpx);
  padding: 22rpx 30rpx 0;
  background: #fff;
  z-index: 99;
  // white-space: nowrap;
  // overflow-x: scroll;

  .tablist {
    // display: inline-block;
    // margin: 0 50rpx 0 0;

    .name {
    }

    .border {
      margin: 18rpx auto 0;
      width: 64rpx;
      height: 4rpx;
      border-radius: 6rpx;
      background: var(--view-theme);
    }
  }
}
</style>
